// * checkbox
<template>
  <label :class="['s-checkbox', { 's-checkbox-disabled': disabled }]">
    <span>
      <!-- 复选框组 -->
      <input
        v-if="hasGroup"
        v-model="model"
        type="checkbox"
        :disabled="disabled"
        :value="label"
        @change="handleGroupItemChange"
      />
      <!-- 单个复选框 -->
      <input
        v-else
        type="checkbox"
        :disabled="disabled"
        :checked="currentValue"
        @change="handleChange"
      />
    </span>
    <slot>{{ label }}</slot>
  </label>
</template>

<script>
import Emitter from '../../mixins/emitter'
import { findComponentUpward } from '../../utils/assist'

export default {
  name: 'Checkbox',

  mixins: [Emitter],

  props: {
    label: {
      type: String,
      default: '',
    },
    value: {
      type: [String, Number, Boolean],
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    trueValue: {
      type: [String, Number, Boolean],
      default: true,
    },
    falseValue: {
      type: [String, Number, Boolean],
      default: false,
    },
  },

  data() {
    return {
      parent: null, // 父节点即 checkbox-group
      model: [], // checkbox-group绑定的model，由checkbox-group初始化
    }
  },

  computed: {
    hasGroup() {
      return this.parent !== null && this.parent !== undefined
    }, // 是否有父checkbox-group

    /**
     * * currentValue
     */
    currentValue: {
      get() {
        if (this.value === this.trueValue || this.value === this.falseValue) {
          return this.value === this.trueValue
        } else {
          throw new Error(
            `[skyui warn]: value should be ${this.trueValue} or ${this.falseValue}`
          )
        }
      },
      set(checked) {
        this.$emit('input', checked ? this.trueValue : this.falseValue)
      },
    }, // 联动 v-model
  },
  mounted() {
    // 查找是否使用checkbox-group
    const parent = findComponentUpward(this, 'CheckboxGroup')

    this.parent = parent
    if (parent) parent.updateModel()
  },

  methods: {
    // * change事件-有checkbox-group
    handleGroupItemChange(e) {
      if (this.disabled) return false

      this.notifyCheckboxGroup({ type: 'change', data: this.model })
    },
    // * change事件-无checkbox-group
    handleChange(e) {
      if (this.disabled) return false

      const checked = e.target.checked
      this.currentValue = checked

      const value = checked ? this.trueValue : this.falseValue

      this.notifyUser(value)
      this.notifyFormItem({ type: 'change', data: value })
    },

    // * 通知CheckboxGroup组件
    notifyCheckboxGroup({ type, data }) {
      switch (type) {
        case 'change':
          this.parent.change(data)
          break
      }
    },

    // * 通知用户组件（前提：没有CheckboxGroup父组件）
    notifyUser(data) {
      this.$emit('on-change', data)
    },

    // * 通知FormItem组件（前提：没有CheckboxGroup父组件）
    notifyFormItem({ type, data }) {
      switch (type) {
        case 'change':
          this.dispatch('FormItem', 'on-form-change', data)
          break
      }
    },
  },
}
</script>
